import React, { Component } from 'react';
import {renderRoutes, matchRoutes} from 'react-router-config';
import {NavLink} from 'react-router-dom'
import { connect } from 'react-redux'
import { setSaleListData, clearSaleListData } from '@/store/action/sale'

import SearchNav from '@/components/SearchNav'

import Item from './ui/ListItem/item'
import {SearchStyle} from './style'

//图片
import arrow from '@/assets/images/sale/more_6ed9489.png'

@connect( state=>({saleListData: state.getIn(['sale','saleListData']).toJS()}) , {setSaleListData, clearSaleListData})
class index extends Component {
  state = {
    brandSale : [
      {
        title: "运动",
        img: "http://shihuo.hupucdn.com/appHome/201711/0113/705803887a16991348788bc77ef96298.png"
      },
      {
        title: "休闲",
        img: "http://shihuo.hupucdn.com/appHome/201711/0113/ed229a3887b997986de9d2fa99968f2c.png"
      },
      {
        title: "户外",
        img: "http://shihuo.hupucdn.com/appHome/201711/0113/3be9bb6590b50ae4c2c823353ebd1bb9.png"
      },
      {
        title: "数码",
        img: "http://shihuo.hupucdn.com/appHome/201711/0113/26a9c61773702db21dbe4b9d9a5bed60.png"
      },
      {
        title: "更多",
        img: "http://shihuo.hupucdn.com/appHome/201711/0113/487a7ff8df880418d15d3db5e4608a0f.png"
      }
    ],
    brandSaleBottom: [
      {
        imgBig:"http://shihuo.hupucdn.com/appHome/201801/0811/8b50d3b1734f11c83f911a361c96d1b9.jpg",
        imgSmall: "http://shihuo.hupucdn.com/goods/style/201708/1716/a8418a3ae650e7c5c76eea45f2a2bcc1.png",
        tit:"日高",
        subtit: "定金50抵450"
      },
      {
        imgBig:"http://shihuo.hupucdn.com/appHome/201801/0612/71cd68692b56ab4bd992716e2c010270.jpg",
        imgSmall: "http://shihuo.hupucdn.com/goods/style/201708/1716/4ef177124aa7ba5eb5d6ef5c135ae057.png",
        tit:"匹克",
        subtit: "不止5折"
      },
      {
        imgBig:"http://shihuo.hupucdn.com/appHome/201801/0612/ecbb92938c6c2e81bf6d4825f82b5fd9.jpg",
        imgSmall: "http://shihuo.hupucdn.com/newslogo/201710/1814/cd232408542a3bafc7eb464f74909171.jpg",
        tit:"dickies",
        subtit: "满11减10元"
      },
      {
        imgBig:"http://shihuo.hupucdn.com/appHome/201801/0811/8f97c03a7fd2604d27568b087b8b5b59.jpg",
        imgSmall: "http://shihuo.hupucdn.com/goods/style/201708/1716/6c79a6f7612a56c851451ca0f0929025.png",
        tit:"铭瑄",
        subtit: "虎扑专享满600减180"
      },
      {
        imgBig:"http://shihuo.hupucdn.com/appHome/201801/0811/985b1e7d8fc8eddc2a80c2b8b309ac2d.jpg",
        imgSmall: "http://shihuo.hupucdn.com/goods/style/202009/3014/b19ab81c70143c82b754d5fb6570314b.jpg",
        tit:"Sony索尼",
        subtit: "满48减10"
      },
      {
        imgBig:"http://shihuo.hupucdn.com/appHome/201801/0612/6751d06bc35a2e370f97982491bde549.jpg",
        imgSmall: "http://shihuo.hupucdn.com/newslogo/201710/2312/e08733467eb951d4ff57debfbf97396e.jpg",
        tit:"UA",
        subtit: "虎扑专享满600减180"
      },
    ],
  }
  changeSubRouter(){
    let type = 999;
    switch (this.props.location.pathname) {
      case '/sale/choiceness':
        type = 999;
        break;
      case '/sale/footwear':
        type = 1;
        break;
      case '/sale/costume':
        type = 2;
        break;
      case '/sale/numerical':
        type = 3;
        break;
      case '/sale/interest':
        type = 4;
        break;
    
      default:
        break;
    }
    return type;
  }
  componentDidMount(){
    // this.props.setFooterMenu("block");
    this.unPathListen = this.props.history.listen(location => {
      this.props.clearSaleListData();
    })
  }
  componentWillUnmount(){
    this.unPathListen()
  }

  render() {
    // const branch = matchRoutes(this.props.route.routes, "/sale/choiceness");
    // console.log(branch);
    const {brandSale,brandSaleBottom} = this.state
    // console.log(this.props);
    return (
      <div className="page">
        <SearchStyle>
          <SearchNav></SearchNav>
          {/* 搜卷指南 */}
          <div className="main-title">
            <span className="yhj">
            已收集&nbsp;<span>0</span>&nbsp;张优惠券
            </span>
            <a className="sjzn" href=""></a>
          </div>
          {/* 品牌特卖 */}
          <div className="pptm">
            <div className="title">
              <span className="l">
              品牌特卖
              </span>
              <a className="more" href="">更多品牌&nbsp;<img src={arrow} alt=""></img></a>
            </div>
            <div className="shihuo1111-temai">
              <ul className="top">
                {
                  brandSale.map((item,index) => (
                  <li key = {index}>
                    <a className="item" href="">
                      <img alt="" src={item.img}/>
                      <span>{item.title}</span>
                    </a>
                  </li>
                  ))
                }
              </ul>
              <ul className="bottom">
                {
                  brandSaleBottom.map((item,index) => (
                  <li key = {index}>
                    <a className="item" href="">
                      <img className="bigimg" alt="" src={item.imgBig}/>
                      <img className="smallimg" alt="" src={item.imgSmall}/>
                      <div className="brand-tit">{item.tit}</div>
                      <div className="brand-subtit">{item.subtit}</div>
                    </a>
                  </li>
                  ))
                }
              </ul>
            </div>
          </div>
          {/* 超值9快9 */}
          <div className="overbalance">
            <div className="title">
              <span className="l">
              超值9块9
              <i>24小时淘不停</i>
              </span>
              <a className="more" href="">更多商品&nbsp;<img src={arrow} alt=""></img></a>
            </div>
            <div className="advert-radius">
              <a>
                <img alt="" src="http://shihuo.hupucdn.com/appHome/201902/0323/6de7db22aecf585cf2544cafd24c2bf9.png"/>
              </a>
            </div>
          </div>
          <div className="menu-list">
            <div className="link">
              <NavLink to="/sale/choiceness" activeClassName="navLinkActive">精选</NavLink>
              <NavLink to="/sale/footwear" activeClassName="navLinkActive">鞋类</NavLink>
              <NavLink to="/sale/costume" activeClassName="navLinkActive">服饰</NavLink>
              <NavLink to="/sale/numerical" activeClassName="navLinkActive">数码</NavLink>
              <NavLink to="/sale/interest" activeClassName="navLinkActive">兴趣</NavLink>
            </div>
            <div className="tagbtn"></div>
          </div>
          {/* ListView */}
          {/* 渲染子路由组件，第二个参数用来向子路由传递参数 */}
          {renderRoutes(this.props.route.routes,{
            item: Item,
            data: this.props.saleListData,
            getData: (page=1) => this.props.setSaleListData({
              r: this.changeSubRouter(),
              page,
              page_size: 30,
            })
          })}
        </SearchStyle>
      </div>
    );
  }
}

export default index;
